<template>
  <div style="position: relative">
    <div class="carousel">
      <el-carousel height="600px" ref="carousel" trigger="click" arrow="never" :autoplay="false" indicator-position="none">
        <el-carousel-item style="background-image:url(https://img09.zhaopin.com/2012/other/mobile/landing/register_to_c.jpg);background-position-x: 50%">
        </el-carousel-item>
        <el-carousel-item style="background-image:url(https://img09.zhaopin.com/2012/other/mobile/landing/register_to_b.jpg);background-position-x: 50%">
        </el-carousel-item>

      </el-carousel>
    </div>
    <div class="tabs" >
      <el-tabs type="card" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="我要找工作">
          <el-form label-width="80px" style="padding: 30px" :model="form" ref="form" :rules="rule">
            <el-form-item label="账号" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-button type="primary" @click="login('1')">登录</el-button>
            <el-button type="primary" @click="regist_vis=true">注册</el-button>
          </el-form>
          <el-button type="text" @click="getpassword_vis=true">忘记密码</el-button>
        </el-tab-pane>
        <el-tab-pane label="我要招人">
          <el-form label-width="80px" style="padding: 30px" :model="form" ref="form" :rules="rule">
            <el-form-item label="账号" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-button type="primary" @click="login('2')">登录</el-button>
            <el-button type="primary" @click="login('1')">注册</el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog :visible.sync="getpassword_vis">
      <el-row type="flex">
        <el-input placeholder="请输入绑定的手机号码" v-model="phonenumer"></el-input>
        <el-button type="primary" @click="getpassword">找回密码</el-button>
      </el-row>
    </el-dialog>
    <el-dialog :visible.sync="regist_vis" width="20rem">
      <el-form :model="registForm" :rules="rule2" ref="registForm">
        <el-form-item label="手机号" prop="number">
          <el-input v-model.number="registForm.number"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="registForm.pass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="registForm.checkPass"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="regist">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {requests} from "@/utils/request";
import router from "@/router/router";
import {getPassword,regist} from "@/utils/api/user"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "login",
  data(){
    return{
      registForm:{
        number:'',
        pass:'',
        checkPass:''
      },
      phonenumer:'',
      getpassword_vis:false,
      regist_vis:false,
      form:{
        name:'',
        password:'',
      },
      rule:{
        name:[
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 5, message: '长度需大于5个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '长度需大于6个字符', trigger: 'blur' }
        ]
      },
      rule2:{
        number: [
          {validator: (rule,value,callback)=>{
            if(/^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/.test(value)){
              callback()
            }else {
              callback(new Error("手机号格式不正确"))
            }
            },trigger:'blur'}
        ],
        pass:[{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '长度需大于6个字符', trigger: 'blur' }],
        checkPass: [{validator:(rule,value,callback)=>{
          if(value===''){
            callback(new Error("请再次输入密码"))
          }
          else if(value!=this.registForm.pass){
            callback(new Error("两次密码不一致"))
          }
          else {
            callback()
          }
          },trigger:'blur'}]
      }
    }
  },
  methods:{
    handleClick(tab){
      console.log(tab)
      this.$refs.carousel.setActiveItem(tab.index)
    },
    login(type){
      this.$refs.form.validate((valid) => {
        if (valid) {
          requests.get("/user/login/"+this.form.name+"/"+this.form.password).then(
              res=>{
                if(res.data.status==="300"){
                  this.$message.error({
                    message:"账号或密码错误"
                  })
                  this.$refs.form.resetFields()
                  return
                }
                localStorage.setItem("token",res.data.data.token)
                localStorage.setItem("userid",res.data.data.id)
                localStorage.setItem("type",type)
                router.push('/')
              }
          )
        }
      });
    },
    regist(){
      this.$refs.registForm.validate(v=>{
        if(!v){
          console.log("error")
          return false
        }
        else {
          const user={
            phoneNumber:this.registForm.number,
            password:this.registForm.pass
          }
          regist(user).then(res=>{
            if(res.data.msg){
              this.$alert(res.data.msg);
            }
            else {
              this.$message.success(res.data.data)
            }
          })
          this.regist_vis=false
        }
      })
    },
     getpassword() {
      this.getpassword_vis = false
       getPassword(this.phonenumer).then(res=>{
        if(res.data.status=='300'){
          this.$alert(res.data.msg);
        }else {
          this.$alert(password, '你的密码是');
        }
       })
    }
  }
}

</script>

<style scoped>
.carousel{
}
.tabs{
  width: 400px;
  background-color: white;
  position: absolute;
  top: 20%;
  right: 5%;
  z-index: 3;
}

</style>